import { PageContainer } from '@ant-design/pro-components';
import { Button, Card, Col, Row, Empty, Select } from 'antd';
import { history } from 'umi';
import { themeButtonStyle } from '../../../config/globalStyle';
import emptyImg from '../../../public/empty.png';
const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};
const NotificationSettings = () => {
  return (
    <PageContainer>
      <Row gutter={24}>
        <Col lg={24} md={24} flex={1}>
          <Card>
            <Select
              defaultValue="jack"
              style={{ width: 220 }}
              onChange={handleChange}
              options={[
                { value: 'jack', label: '上海外国语实验中学' },
                { value: 'lucy', label: '上海实验中学' },
                { value: 'Yiminghe', label: '上海外国语中学' },
              ]}
            />
          </Card>
        </Col>
      </Row>
      <Row gutter={24} style={{ marginTop: '20px' }}>
        <Col lg={24} md={24} flex={1}>
          <Card bodyStyle={{ height: '80vh' }}>
            <Button
              onClick={() => {
                history.push('/notificationSettings/edit');
              }}
              style={themeButtonStyle}
            >
              + 新建通知书
            </Button>
            <Empty
              image={emptyImg}
              description="暂无模版, 去新建～"
              style={{ width: '200px', marginTop: '80px', color: 'rgba(23, 117, 245, 1)' }}
            />
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};

export default NotificationSettings;
